import React, { Component } from 'react';
import work from './index.module.css'
import getday from '../../util/getday'
import EchartsTest from './echarts'
import { Calendar, ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
class Work extends Component {
  state = {
    studentnum: '',
    newstudent: '',
    classnum: ''
  }
  onPanelChange = (value, mode) => {
    console.log(value, mode);
  }
  render() {
    const { studentnum, newstudent, classnum, option } = this.state
    return (
      <div className={work.box}>
        {/* 左边盒子 */}
        <div className={work.box1}>
          <div className={work.box1top}>
            {/* 学生 */}
            <div>
              <h3>学生人数总量</h3>
              <span style={{ fontWeight: 800 }}>{studentnum}人</span>
            </div>
            {/* 今日新增 */}
            <div>
              <h3>今日新增学生人数</h3>
              <span style={{ fontWeight: 800 }}>{newstudent}人</span>

            </div>
            {/* 班级 */}
            <div>
              <h3>班级总量</h3>
              <span style={{ fontWeight: 800 }}>{classnum}个</span>
            </div>
          </div>
          <div className={work.box_bottom}>
            <EchartsTest style={{ width: '300px', height: '200px', textAlign: 'center' }} />
          </div>
        </div>
        {/* 右边盒子 */}
        <div className={work.box2}>
          <div className={work.site}>
            <ConfigProvider locale={zhCN}>
              <Calendar fullscreen={false} onPanelChange={this.onPanelChange} />
            </ConfigProvider>
          </div>,
        </div>

      </div>
    );
  }
  componentDidMount() {
    this.$httpReq(this.$api.getStudentList(), res => {
      const { code, data } = res;
      if (code) {
        this.setState({ studentnum: data.studentData.length })
        this.setState({ classnum: data.classData.length })
        let today = getday(new Date().getTime())
        let newstu = []
        data.studentData.forEach(item => {
          if (getday(item.createTime * 1) == today) {
            newstu.push(item)
          }
        })
        this.setState({ newstudent: newstu.length })
      }
    })
  }
}

export default Work;